<template>
    <!-- Date picker -->
    <div class="col-lg-12">
        <div class="ibox ">
            <div class="ibox-content">
                <div id="reportrange" class="form-control">
                    <label class="col-form-label mr-1">时间段：</label>
                    <i class="fa fa-calendar"></i>
                    <span id="daterange" ref="dateShow"></span> <b class="caret mr-4"></b>
                    <!-- <br> -->
                    <label class="col-form-label mr-1">{{droplist1.title}}</label>
                    <select class="mr-4" @change="select1_changed" v-if="droplist1.title" multiple="multiple" id="select1" placeholder="请选择">
                        <option value="all">所有</option>
                        <option :value="value" v-bind:key="value" v-for="value in droplist1.data">{{select1_show(value)}}</option>
                    </select>
                    <!-- <label class="col-form-label mr-1">{{droplist2.title}}</label>
                    <select v-model="select2" class="mr-4" v-if="droplist2.title">
                        <option value="all">所有</option>
                        <option :value="value" v-bind:key="value" v-for="value in droplist2.data">{{judgeComponent(value)}}</option>
                    </select> -->
                    <button id="datepicker" class="btn btn-sm btn-primary mr-2 ml-4" value="Search" @click="search" style="height: 38px; width: 68px;">
                        <span v-if="searching==true">搜索</span>
                        <div class="spiner-example" style="height: 28px; padding-top: 0px;" v-if="searching==false">
                                <div class="sk-spinner sk-spinner-wave">
                                    <div class="sk-rect1"></div>
                                    <div class="sk-rect2"></div>
                                    <div class="sk-rect3"></div>
                                    <div class="sk-rect4"></div>
                                    <div class="sk-rect5"></div>
                                </div>
                        </div>
                    </button>
                    
                    <!-- <button id="datepicker1" class="btn btn-sm btn-primary" value="SearchDetail" @click="searchDetail">详情搜索</button> -->
                    
                </div>

            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'DatePicker',
    props: {
        droplist1: [Array, Object],
        droplist2: [Array, Object],
        url: [String],
        projectId: [Number, String]
    },
    data: () => {
        return {
            dateChange: '',
            select1: [Array],
            select2: 'all',
            searching: true
        }
    },
    watch: {
        dateChange: function() {
            // eslint-disable-next-line
            // console.log('dateChange has been changed');
        },
        select1: function(val) {
            // eslint-disable-next-line
        }
    },
    methods: {
        search: function() {
            this.dateChange = this.$refs.dateShow.innerText;
            this.$emit('dateChange', this.dateChange);
            this.$emit('select1', this.select1);
            this.$emit('popModal');
            this.searching = false;
            var cdom = document.getElementById("datepicker");
            // cdom.click();
            cdom.setAttribute("style","background-color:#FFFFFF");
            var t;
            clearTimeout(t)
            let _this = this;
            t = setTimeout(function (){
                _this.searching = true;
                cdom.setAttribute("style","background-color:#1ab394;height:38px;width:68px;");
            }, 1000);
            // eslint-disable-next-line
            // console.log(this.select1);
        },
        select1_changed: function() {
            // eslint-disable-next-line
            this.$emit('select1_change', this.select1);
        },
        judgeComponent: function(string) {
            if (string == '') {
                return '未命名'
            } else {
                return string
            }
        },
        select1_show: function(string) {
            if (string.indexOf(' ')>=0){
                return string.split(' ')[0];
            } else {
                return string;
            }
        }
    },
    mounted: function() {
        var _this = this;
        /* eslint-disable */
        $('#daterange').html(moment().subtract(6, 'days').format('YYYY-MM-DD')+' - '+moment().format('YYYY-MM-DD'));
        // $('#daterange').html('2018-08-01 - 2018-08-31');
        $('#select1').select2({width: 350 + "px", placeholder: "点击输入框，可以多选"});
        $("#select1").on('change', function (e) {
            // console.log(e);
            var test = $("#select1").select2('data');
            _this.select1 = test;
            return test
        });
        $("#select1").val(['all']).trigger('change');
        _this.search();
        // this.dateChange = moment().subtract(6, 'days').format('YYYY-MM-DD')+' - '+moment().format('YYYY-MM-DD');
        /* Initial the load data base on the date picker value, default last 15 days */
        $('#daterange').daterangepicker({
            format: 'YYYY-MM-DD',
            startDate: moment().subtract(6, 'days'),
            endDate: moment(),
            minDate: '1990-01-01',
            maxDate: '2099-12-31',
            dateLimit: {days: 4096},
            showDropdowns: true,
            showWeekNumbers: true,
            timePicker: false,
            timePickerIncrement: 1,
            timePicker12Hour: true,
            ranges: {
                'Today': [moment(), moment()],
                'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                'This Month': [moment().startOf('month'), moment().endOf('month')],
                'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
            },
            opens: 'right',
            drops: 'down',
            buttonClasses: ['btn', 'btn-sm'],
            applyClass: 'btn-primary',
            cancelClass: 'btn-default',
            separator: ' to ',
            locale: {
                applyLabel: 'Submit',
                cancelLabel: 'Cancel',
                fromLabel: 'From',
                toLabel: 'To',
                customRangeLabel: 'Custom',
                daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
                monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
                firstDay: 1
            }
        }, function(start, end, label) {
            console.log(start.toISOString(), end.toISOString(), label);
            $('#daterange').html(start.format('YYYY-MM-DD') + ' - ' + end.format('YYYY-MM-DD'));
        });
        // this.search();
    }
}
</script>
